<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <h1>掘金博客搜索</h1>
    <form id="myForm">
      <input name="keyword" type="text" />
      <button type="submit">搜索</button>
    </form>
    <ul id="articleList"></ul>
    <script src="/node_modules/ejs/ejs.min.js"></script>
    <script>
      const form = document.getElementById('myForm')
      const articleList = document.getElementById('articleList')

      form.addEventListener('submit', function (event) {
        event.preventDefault() // 阻止默认的表单提交行为

        // 在这里执行你的自定义逻辑
        // 例如，获取表单数据并进行处理
        const keywordInput = form.elements.keyword
        const keyword = keywordInput.value
        console.log('Submitted keyword:', keyword)

        // 可以通过 AJAX 或其他方式将数据发送到服务器
        // 这里只是一个简单的示例，将数据打印到控制台
        // 对第三方服务器的客户端请求的跨域问题无法解决
        // fetch(
        //   `https://api.juejin.cn/search_api/v1/search?aid=2608&uuid=7168314789041751567&spider=0&query=${encodeURIComponent(
        //     keyword
        //   )}&id_type=0&cursor=0&limit=5&search_type=0&sort_type=2&version=1`,
        //   {
        //     method: 'GET',
        //     mode: 'no-cors',
        //     Referer: '',
        //     referrerPolicy: 'no-referrer',
        //   }
        // )

        // 利用服务端没有跨域的问题,请求第三方服务器的数据
        fetch(`http://localhost:3000/juejinSearch?keyword=${encodeURIComponent(keyword)}&id_type=0&cursor=0&limit=5&search_type=0&sort_type=2&version=1`)
          .then((response) => response.json())
          .then((res) => {
            console.log('fetch-res', res)
            const template = `<% data.forEach(function(item){ %>
            <li>
              <% if (item.result_model.article_info) { %>
              <div class="article-card">
                <img class="article-cover" src="<%= item.result_model.article_info.cover_image %>" alt="<%= item.result_model.article_info.title %>" />
                <div class="article-content">
                  <h2 class="title"><%= item.result_model.article_info.title %></h2>
                  <div class="abstract"><%= item.result_model.article_info.brief_content %></div>
                </div>
              </div>
              <% } %>
            </li>
            <% }) %>`
            //       const template =
            //         '<% data.forEach(function(item){ %>\
            // <li>\
            //   <% if (item.result_model.article_info) { %>\
            //   <div class="article-card">\
            //     <img class="article-cover" src="<%= item.result_model.article_info.cover_image %>" alt="<%= item.result_model.article_info.title %>" />\
            //     <div class="article-content">\
            //       <h2 class="title"><%= item.result_model.article_info.title %></h2>\
            //       <div class="abstract"><%= item.result_model.article_info.brief_content %></div>\
            //     </div>\
            //   </div>\
            //   <% } %>\
            // </li>\
            // <% }) %>'
            const renderedHTML = ejs.render(template, {
              data: res?.data || [],
            })
            articleList.innerHTML = renderedHTML
          })
          .catch((err) => console.log('Request Failed', err))
      })
    </script>
  </body>
</html>
